<!-- 页面 -->
<template>
	<view class="ss-user-info-wrap ss-p-t-50">
		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
			<view class="left-box ss-flex ss-col-center ss-m-l-36" @tap="handleLogin()" style="width: 70%">
				<view class="avatar-box ss-m-r-24">
					<image class="avatar-img" :src="isLogin && userInfo.avatar
							? userInfo.avatar
							: 'https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/用户头像.png'
						" mode="aspectFill"></image>
				</view>
				<view>
					<view class="nickname-box ss-flex ss-col-center">
						<view class="nick-name ss-m-r-20">{{
							userInfo?.nickname || nickname
						}}</view>
					</view>
				</view>
			</view>
			<view class="right-box ss-m-r-52" style="
          display: flex;
          color: #fff;
          font-size: 40rpx;
          width: 160rpx;
          justify-content: space-around;
        ">
				<button class="ss-reset-button" open-type="contact" bindcontact="handleContact">
					<!-- <text class="sicon-qrcode"></text> -->
					<uni-icons type="headphones" size="30"></uni-icons>
				</button>
				<button class="ss-reset-button" @tap="sheep.$router.go('/pages/user/info')">
					<!-- <text class="sicon-orders" style="font-size:30"></text> -->
					<uni-icons type="more-filled" size="30"></uni-icons>
				</button>
			</view>
		</view>

		<!--    <view-->
		<!--      class="bind-mobile-box ss-flex ss-row-between ss-col-center"-->
		<!--      v-if="isLogin && !userInfo.verification?.mobile"-->
		<!--    >-->
		<!--      <view class="ss-flex">-->
		<!--        <text class="cicon-mobile-o"></text>-->
		<!--        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>-->
		<!--      </view>-->
		<!--      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>-->
		<!--    </view>-->
	</view>
</template>

<script setup>
/**
 * 用户卡片
 *
 * @property {Number} leftSpace 									- 容器左间距
 * @property {Number} rightSpace 									- 容器右间距
 *
 * @property {String} avatar 					- 头像
 * @property {String} nickname 					- 昵称
 * @property {String} vip		  				- 等级
 * @property {String} collectNum 				- 收藏数
 * @property {String} likeNum 					- 点赞数
 *
 *
 */
import {
	computed,
	reactive
} from "vue";
import sheep from "@/sheep";
import {
	showShareModal,
	showAuthModal
} from "@/sheep/hooks/useModal";

// 用户信息
const userInfo = computed(() => sheep.$store("user").userInfo);

// 是否登录
const isLogin = computed(() => sheep.$store("user").isLogin);
// 接收参数
const props = defineProps({
	background: {
		type: String,
		default: "",
	},
	// 头像
	avatar: {
		type: String,
		default: "",
	},
	nickname: {
		type: String,
		default: "请先登录",
	},
	vip: {
		type: [String, Number],
		default: "1",
	},
	collectNum: {
		type: [String, Number],
		default: "1",
	},
	likeNum: {
		type: [String, Number],
		default: "1",
	},
});

function onBind() {
	showAuthModal("changeMobile");
}

function handleContact(e) {
	console.log(e.detail.path)
	console.log(e.detail.query)
}

function handleLogin() {
	if (!isLogin.value) {
		if (sheep.$platform.name === "WechatMiniProgram") {
			showAuthModal("wechatMiniLogin");
			return;
		}
		showAuthModal("smsLogin");
	}
}
</script>

<style lang="scss" scoped>
.ss-user-info-wrap {
	box-sizing: border-box;

	.avatar-box {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;

		.avatar-img {
			width: 100%;
			height: 100%;
		}
	}

	.nick-name {
		font-size: 34rpx;
		font-weight: 700;
		color: #fff;
		line-height: normal;
	}

	.vip-img {
		width: 30rpx;
		height: 30rpx;
	}

	.sicon-qrcode {
		color: #fff;
	}
}

.bind-mobile-box {
	width: 100%;
	height: 84rpx;
	padding: 0 34rpx 0 44rpx;
	box-sizing: border-box;
	background: #ffffff;
	box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

	.cicon-mobile-o {
		font-size: 30rpx;
		color: #ff690d;
	}

	.mobile-title {
		font-size: 24rpx;
		font-weight: 500;
		color: #ff690d;
	}

	.bind-btn {
		width: 100rpx;
		height: 50rpx;
		background: #ff6100;
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>